<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['750px', '570px']" :success="init" :btn="action">
    <div style="padding: 20px">
      <lay-form :model="detailUserBo" ref="formRef">
        <lay-form-item label="帐号" mode="inline">
          <lay-input v-model="detailUserBo.username"></lay-input>
        </lay-form-item>
        <lay-form-item label="昵称" mode="inline">
          <lay-input v-model="detailUserBo.nickName"></lay-input>
        </lay-form-item>
        <lay-form-item label="状态" mode="inline">
          <lay-switch v-model="detailUserBo.status"
                      onswitch-value="on" unswitch-value="off"
                      onswitch-text="启用"  unswitch-text="禁用"
                      :disabled="true"></lay-switch>
        </lay-form-item>
        <lay-form-item label="邮箱" mode="inline">
          <lay-input v-model="detailUserBo.email"></lay-input>
        </lay-form-item>
        <lay-form-item label="角色" >
          <lay-tag size="sm" v-for="(userRole,i) in detailUserBo.userRoleVOList" :key="i">{{userRole.roleName}}</lay-tag>
        </lay-form-item>
        <lay-form-item label="来源" mode="inline">
          <lay-input v-model="detailUserBo.source"></lay-input>
        </lay-form-item>
        <lay-form-item label="签名" mode="inline">
          <lay-input v-model="detailUserBo.signature"></lay-input>
        </lay-form-item>
        <lay-form-item label="生日" mode="inline">
          <lay-input v-model="detailUserBo.birthday"></lay-input>
        </lay-form-item>
        <lay-form-item label="头像" mode="inline">
          <lay-input v-model="detailUserBo.profilePhoto">
            <template #prefix><lay-avatar radius :src="detailUserBo.profilePhoto"></lay-avatar></template>
          </lay-input>
        </lay-form-item>
        <lay-form-item label="描述" prop="note">
          <lay-textarea v-model="detailUserBo.note" placeholder="请输入描述" allow-clear></lay-textarea>
        </lay-form-item>
      </lay-form>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {detailUser} from "@/api/module/user";
import useFxwForm from "@/hooks/useFxwForm";

const {changeVisible,visible} = useFxwForm()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
});
const formRef = ref();

const detailUserBo = ref({
  id: 0,
  username: '',
  email: '',
  status:'',
  nickName: '',
  source:'',
  signature: '',
  birthday: '',
  profilePhoto: '',
  userRoleVOList:[
    {
      roleName: ''
    }
  ],
  note:''
})


const init = ()=> {
  detailUser(props.id).then(res=>{
    if (res.data) {
      detailUserBo.value = res.data;
    }
  })
}

const action = ref([
  {
    text: "关闭",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})

</script>

<style scoped>
.layui-form {
  .layui-tag {
    margin: 8px 4px 0 0;
  }
}


</style>